<template>
  <div class="containerDiv" v-loading="loading">
    <el-form
      ref="queryRef"
      :inline="true"
      :model="queryParams"
      class="form-box"
    >
      <div style="display: flex; flex-wrap: wrap">
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.outCode"
              clearable
              placeholder="出库单号"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-select
              clearable
              placeholder="订单来源"
              v-model="queryParams.outType"
            >
              <el-option label="线上出库单" value="0"></el-option>
              <el-option label="手工出库单" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.erpCode"
              clearable
              placeholder="线上订单号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.batchCode"
              clearable
              placeholder="波次号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.skuName"
              clearable
              placeholder="商品名称"
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.receiver"
              clearable
              placeholder="收货人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-input
              v-model="queryParams.receiverPhone"
              clearable
              placeholder="手机号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item class="picker">
            <el-date-picker
              style="width: 100%"
              v-model="timeData"
              start-placeholder="付款时间"
              end-placeholder="付款时间"
              range-separator="-"
              type="datetimerange"
              value-format="YYYY-MM-DD HH:mm:ss"
              unlink-panels
            />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item>
            <el-button icon="Search" type="primary" @click="getList"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </div>
    </el-form>
    <div>
      <el-button type="primary" @click="clickPrintKd">补打快递单</el-button>
      <el-button type="primary" @click="clickPrintFjd">补打分拣单</el-button>
    </div>
    <vxe-table
      style="margin-top: 10px"
      ref="tableRef"
      :data="tableData"
      :height="tableHeight"
      align="center"
      border
      :checkbox-config="{ trigger: 'row' }"
      :row-config="{ isCurrent: true, isHover: true }"
    >
      <vxe-column type="checkbox" width="80"></vxe-column>
      <vxe-column title="序号" type="seq" width="60"></vxe-column>
      <vxe-column field="companyName" width="150" title="公司名称"></vxe-column>
      <vxe-column
        field="warehouseName"
        width="150"
        title="仓库名称"
      ></vxe-column>
      <vxe-column field="outCode" width="200" title="出库单号"></vxe-column>
      <vxe-column field="orderStatus" width="120" title="出库状态">
        <template v-slot="{ row }">
          {{ returnDictLabel(out_order_status, row.orderStatus) }}
        </template>
      </vxe-column>
      <vxe-column field="outType" width="120" title="订单来源">
        <template v-slot="{ row }">
          <div v-if="row.outType == '0'">线上出库单</div>
          <div v-if="row.outType == '1'">手工出库单</div>
        </template>
      </vxe-column>
      <vxe-column
        field="printNumTotal"
        width="100"
        title="总打印次数"
      ></vxe-column>
      <vxe-column
        field="printNumOrder"
        width="110"
        title="订单打印次数"
      ></vxe-column>
      <vxe-column
        field="printNumBatch"
        width="110"
        title="波次打印次数"
      ></vxe-column>
      <vxe-column field="erpCode" width="200" title="线上订单号"></vxe-column>
      <vxe-column field="outNum" width="80" title="出库数量"></vxe-column>
      <vxe-column field="breedNum" width="80" title="品种数量"></vxe-column>
      <vxe-column field="batchCode" width="150" title="波次号"></vxe-column>
      <vxe-column width="380" title="商品信息">
        <template #default="{ row }">
          <div
            v-for="(item, index) in row.detailList"
            :key="index"
            style="display: flex"
          >
            <div style="width: 180px">
              <ImagePreview
                :width="150"
                :height="50"
                :src="row.skuImg"
              ></ImagePreview>
            </div>
            <div style="width: 200px; text-align: left">
              {{ item.skuName }}
            </div>
          </div>
        </template>
      </vxe-column>
      <vxe-column field="receiver" width="150" title="收货人"></vxe-column>
      <vxe-column
        field="receiverPhone"
        width="150"
        title="联系方式"
      ></vxe-column>
      <vxe-column
        field="receiverAddress"
        width="220"
        title="收货地址"
      ></vxe-column>
      <vxe-column
        field="erpOrderTime"
        width="180"
        title="付款时间"
      ></vxe-column>
      <vxe-column field="remark" width="220" title="备注"></vxe-column>
    </vxe-table>
    <pagination
      v-show="total > 0"
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />
    <!--    补打快递单-->
    <OrderReprint
      v-if="isShowDialogKd"
      :isShowDialog="isShowDialogKd"
      :detailList="detailListKd"
      :printStatus="1"
      isReprint="kd"
      @cancel="handleClose"
    ></OrderReprint>
    <!--    补打分拣单-->
    <OrderReprint
      v-if="isShowDialogFjd"
      :isShowDialog="isShowDialogFjd"
      :detailList="detailListFjd"
      :printStatus="1"
      isReprint="fjd"
      @cancel="handleClose"
    ></OrderReprint>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import ImagePreview from "@/components/ImagePreview/index.vue";
import { getSelectOutOrderList } from "@/api/scApi";
import OrderReprint from "@/views/outStorage/outbound/components/orderReprint.vue";

const { proxy } = getCurrentInstance();
const { out_order_status } = proxy.useDict("out_order_status");

let loading = ref(false);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
let timeData = ref([]);
const title = ref("");
const tableData = ref([]);
const total = ref(0);

const resetQuery = () => {
  timeData.value = [];
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
  };
  getList();
};

function getList() {
  loading.value = true;
  queryParams.value.startTime = timeData.value[0];
  queryParams.value.endTime = timeData.value[1];
  queryParams.value.orderStatus = 2; // 0:待打印 1已分配 2 已打印 4已发货
  let params = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    param: queryParams.value,
  };
  getSelectOutOrderList(params)
    .then((res) => {
      if (res.code === 200) {
        tableData.value = res.data;
        total.value = res.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

let tableHeight = ref(0);
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 360;
  });
  window.onresize = () => {
    tableHeight.value = document.body.scrollHeight - 360;
  };
  getList();
});

//补打快递单
let detailListKd = ref([]);
let isShowDialogKd = ref(false);
function clickPrintKd() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    console.log("选择的条数", selectRecords.length);
    if (selectRecords.length > 0) {
      detailListKd.value = selectRecords;
      isShowDialogKd.value = true;
    } else {
      proxy.$modal.msgWarning("请先选择数据!");
    }
  }
}
//补打分拣单
let detailListFjd = ref([]);
let isShowDialogFjd = ref(false);
function clickPrintFjd() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length > 0) {
      detailListFjd.value = selectRecords;
      isShowDialogFjd.value = true;
    } else {
      proxy.$modal.msgWarning("请先选择数据!");
    }
  }
}

function handleClose() {
  isShowDialogKd.value = false;
  isShowDialogFjd.value = false;
  getList();
}
</script>

<style scoped lang="scss">
.containerDiv {
  padding: 0 20px;
  height: calc(100vh - 90px);
}
</style>
